<template>
  <view class="list-bg list-group-row">
    <view class="list-title">自提信息</view>
    <view class="group-info">
      <MenuCell
        :cell-data.sync="ztInfo"
        :cell-column="ztCellColumn"
        @handelCellMethod="handelCellMethod"
        @inputChangeFn="inputChangeFn"
      />
    </view>
  </view>
</template>

<script>
import MenuCell from '@/components/menu-cell'
export default {
  options: { styleIsolation: 'shared' }, //解决/deep/不生效**
  name: 'SelectDeliverTime',
  components: {
    MenuCell
  },
  props: {
    selfAddressModelObj: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      ztCellColumn: [
        {
          label: '自提门店',
          labelStyle: 'fontSize: 24rpx;color: #666;',
          showRightIcon: true,
          fields: ['addAlias'],
          customParams: {
            popPage: 'selectStore'
          },
          methodName: 'showPopFn',
        },
        {
          label: '自提时间',
          labelStyle: 'fontSize: 24rpx;color: #666;',
          fields: ['selfTakeTime'],
          showRightIcon: true,
          customParams: {
            popPage: 'selectSelfDeliveryTime'
          },
          methodName: 'showPopFn',
        },
        {
          label: '提货人姓名',
          labelStyle: 'fontSize: 24rpx;color: #666;',
          fields: ['takeName'],
          rightEl: 'input',
          inputWidth: 400,
          showRightIcon: true,
        },
        {
          label: '提货人电话',
          labelStyle: 'fontSize: 24rpx;color: #666;',
          fields: ['takePhoneNum'],
          rightEl: 'input',
          inputWidth: 400,
          inputType: 'number',
          maxLength: 11,
          showRightIcon: true,
        },
      ],
      ztInfo: {
        addAlias: '',
        selfTakeTime: '',
        takeName: '',
        takePhoneNum: '',
      },
    }
  },
  computed: {
    curOrderInfo() {
      return this.orderInfo
    },
    curSelfAddressModelObj() {
      return this.selfAddressModelObj
    },
  },
  watch: {
    curSelfAddressModelObj: {
      handler(newVal, oldVal) {
        this.initDataFn()
      },
      immediate: false,
    }
  },
  mounted() {
    this.initDataFn()
  },
  methods: {
    initDataFn() {
      const {
        selfAddressModel,
        selfTakeTimeObj,
        receiverName,
        mobile,
        maxArrivalCycle
      } = this.curSelfAddressModelObj
      let time = ''
      if (maxArrivalCycle && maxArrivalCycle > 0) {
        delete this.ztCellColumn[1].methodName
        delete this.ztCellColumn[1].showRightIcon
        this.ztCellColumn[1].contentStyle = 'margin-right: 50rpx;'
      } else {
        this.ztCellColumn[1].methodName = 'showPopFn'
        this.ztCellColumn[1].showRightIcon = true
        delete this.ztCellColumn[1].contentStyle
        if (selfTakeTimeObj && selfTakeTimeObj.selfTakeTime == '12:00:00') {
          time = '上午'
        } else if (selfTakeTimeObj && selfTakeTimeObj.selfTakeTime == '18:00:00') {
          time = '下午'
        }
      }
      this.ztInfo = {
        addAlias: selfAddressModel && selfAddressModel.add_alias ? selfAddressModel.add_alias : '',
        selfTakeTime: selfTakeTimeObj && selfTakeTimeObj.label ? selfTakeTimeObj.label + ' ' + time : '',
        takeName: receiverName || '',
        takePhoneNum: mobile || '',
      }
    },
    /*菜单列表执行函数*/
    handelCellMethod(methodName, val) {
      this[methodName](val)
    },
    /*input变化方法*/
    inputChangeFn() {
      const {
        takeName,
        takePhoneNum
      } = this.ztInfo
      this.curSelfAddressModelObj.mobile = takePhoneNum
      this.curSelfAddressModelObj.receiverName = takeName
      this.$emit('getSelfInfoFn', this.curSelfAddressModelObj)
    },
    /*pop打开*/
    showPopFn(obj) {
      const {
        selfAddressModel,
      } = this.curSelfAddressModelObj
      console.log(selfAddressModel)
      if (obj.customParams.popPage == 'selectSelfDeliveryTime' && (!selfAddressModel || Object.keys(selfAddressModel).length == 0)) {
        this.$u.toast('请选择自提门店')
        return
      }
      this.$emit('showPopFn', obj)
    },
  }
}
</script>

<style scoped lang="scss">
@import "../static/scss/index";
.list-bg{
  margin-left: 0;
}
.class-item{
  width: 252rpx;
  height: 40rpx;
  line-height: 40rpx;
  margin-top: 20rpx!important;
  padding: 16rpx 16rpx!important;
}
.class-item-select{
  padding: 16rpx 16rpx!important;
  width: 248rpx;
  height: 36rpx;
  line-height: 36rpx;
}
/deep/ .u-radio-group{
  display: block;
}
/deep/.u-radio-group--row{
  display: block;
}
</style>
